<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机不重复点名器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        h1 {
            display: flex;
            text-align: center;
            margin: 0 auto;
            font-size: 60px;
            width: 100%;
            height: 110px;
            background-color: rgba(33, 33, 33, 0.98);
            color: white;
            justify-content: center;
            align-items: center;
        }

        body {
            /*display: block;*/

            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(45deg, #30d58d 0%, #31B3E2FF 20%, #316fe2 40%, #8A31E2FF 60%, #9531E2FF 80%, #EE2525FF 100%);
            /*background: linear-gradient(45deg, #1f4037, #99f2c8);*/
            background-size: 600%;
            animation: gradient 8s ease-in-out infinite;
            transition: 0.3s linear all;
            /*background-repeat: no-repeat;*/
            /*margin-top: 100px;*/

        }

        @keyframes gradient {
            50% {
                background-position: 100% 0;
            }
        }

        .content {
            margin: 8% auto;
        }

        #parent {
            display: flex;
            margin: 0 auto;
            width: 700px;
            height: 260px;
            background-color: #f3f0ec;
            border-radius: 10px;
        }

        #box {
            margin-top: 50px;
            margin-left: 50px;
            position: absolute;
            width: 600px;
            height: 94px;
            font-size: 66px;


            /*border: 1px solid black;*/
            font-weight: bold;
            /*border-radius: 20px;*/

            border: none;
            text-align: center;
            /*background-color: #ffffff;*/
            overflow: hidden;
            color: #1f1d1d;
        }

        #startBtn {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            margin: 25% auto;

            /*margin-top: 190px;*/
            /*margin-left: 240px;*/
            height: 50px;
            width: 200px;
            padding: 5px;
            border: 2px solid black;
            border-radius: 10px;
            background-color: #de3d35;
            color: white;
            font-weight: bold;
            font-size: 25px;
            cursor: pointer;
        }

        #dropzone {
            color: #ffffff;
            margin: auto;
            width: 700px;
            height: 200px;
            border: 5px dashed #ccc;
            display: block;
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            line-height: 200px;
            transition: 0.2s;
            font-size: 20px;

        }

        #textArea {
            overflow: auto;
        }

        /*--------滚动条宽度*/
        #textArea::-webkit-scrollbar {
            width: 10px;
        }

        /*--------滚动条滑块样式*/
        #textArea::-webkit-scrollbar-thumb {
            background-color: #333;
            border: 1px solid silver;
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(238, 238, 238, 0.2);
        }

        /*---------滚动条轨道*/
        #textArea::-webkit-scrollbar-track {

            background-color: #f3f3f3;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
        }

        /*------滚动条小边角*/
        #textArea::-webkit-scrollbar-corner {
            background-color: transparent;
        }


        #textArea {
            margin: 15px auto;
            /*margin-top: 10px;*/
            /*margin-bottom: 50px;*/
            display: block;
            height: 200px;
            width: 700px;
            border: 1px solid black;
            border-radius: 10px;
            font-size: 20px;
            padding: 20px;
            outline: none;
            resize: vertical;
        }

        #textArea:focus {
            outline: 1px solid black;
        }

        /* 
        .footer {
            display: flex;
            text-align: center;
            margin: auto;
            top: 20px;
            color: #fff;
            height: 40px;
            background: #353535;
            justify-content: center;
        } */

        a {
            color: white;
            font-size: 20px;
        }
    </style>

</head>

<body>

    <h1>-------------幸运抽奖--------------</h1>
    <a href="./temp.html">首页</a>
    <div class="content">
        <div id="parent">
            <div id="box">别紧张</div>
            <button id="startBtn" type="button">开始</button>
        </div>
        <textarea id="textArea" placeholder="已点完~"> </textarea>

        <div id="dropzone">
            点击导入 txt 文件 或将文件拖拽到此处
        </div>
    </div>

</body>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        /** @type {HTMLTextAreaElement} */
        const textArea = document.getElementById('textArea');// 获取文本输入框的引用
        /** @type {HTMLDivElement} */
        const dropzone = document.getElementById('dropzone'); // 获取拖拽区域的引用
        /** @type {HTMLButtonElement} */
        const startBtn = document.getElementById('startBtn');//获取开始按钮的引用
        /** @type {HTMLDivElement} */
        const box = document.getElementById('box');// 获取显示姓名的容器的引用
        /** @type {string[]} */
        const nameList = []; // 用于存储姓名列表的数组
        /** @type {number | null} */
        let intervalId = null;// 定时器的ID

        // 拖拽相关事件的处理函数
        dropzone.addEventListener('dragover', event => {
            event.preventDefault();
            dropzone.classList.add('dragover');
        });
        dropzone.addEventListener('dragleave', () => {
            dropzone.classList.remove('dragover');
        });
        dropzone.addEventListener('drop', event => {
            event.preventDefault();
            dropzone.classList.remove('dragover');
            const file = event.dataTransfer.files[0];
            handleFile(file);// 处理拖拽的文件
        });
        dropzone.addEventListener('click', () => {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = '.txt'; // 可选，限制上传的文件类型
            fileInput.addEventListener('change', event => {
                const file = event.target.files[0];
                handleFile(file);// 处理选择的文件
            });
            fileInput.click();
        });
        let index
        let isFirst = true
        let textAreaContent = ''

        // 开始按钮的点击事件处理函数
        startBtn.addEventListener('click', () => {

            if (intervalId == null) { //如果当前处于停止状态 stop to start
                // update name list
                nameList.length = 0;// 清空姓名列表

                for (var name of textArea.value.replace('\r\n', '\n').replace('\r', '\n').split('\n')) {
                    name = name.trim();

                    if (name.length > 0) {
                        nameList.push(name);// 将每行的姓名加入到姓   名列表中
                    }
                }
                console.log("删前：" + nameList)
                if (!isFirst && nameList.length != 1) {
                    nameList.splice(index, 1)
                }
                console.log("删后：" + nameList)
                console.log("-----------------------")

                if (nameList.length === 0) {
                    alert('请先导入姓名！');
                    return;
                }
                startBtn.style.backgroundColor = '#161616'// 设置开始按钮的样式为停止状态
                startBtn.innerHTML = "停止";

                intervalId = setInterval(() => {
                    index = randInt(0, nameList.length); // 随机选取一个姓名的索引
                    box.innerHTML = nameList[index];// 在显示姓名的容器中显示选中的姓名
                }, 50);
            } else { // start to stop 如果当前处于开始状态
                isFirst = false
                startBtn.style.backgroundColor = '#de3d35';// 设置开始按钮的样式为开始状态
                startBtn.innerHTML = "开始";
                clearInterval(intervalId); // 清除定时器
                intervalId = null;
                // 从textarea.value读取内容，并去除已点过的名字

                for (let name of textArea.value.replace('\r\n', '\n').replace('\r', '\n').split('\n')) {
                    name = name.trim();
                    if (name !== nameList[index] && name.length > 0) {
                        textAreaContent += name + '\n'
                    }
                }
                textArea.value = textAreaContent // 将每行的姓名加入到textarea中
                textAreaContent = ''
            }
        });

        /**
         * Returns a random integer between min (inclusive) and max (exclusive).
         * 返回min（包含）和max（不包含）之间的随机整数。
         * @param {number} min
         * @param {number} max
         */
        function randInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min;// 生成随机整数
        }

        /** @param {File} file */
        function handleFile(file) {
            const reader = new FileReader(); // 创建一个文件读取器
            // reader.onload = event => {
            //     const contents = event.target.result;
            //     textArea.value = contents;
            // };
            // reader.readAsText(file);
            reader.onload = (event) => {
                /** @type {ArrayBuffer} */
                const contents = event.target.result;
                const utf8Decoder = new TextDecoder('utf-8');// 使用UTF-8解码文件内容
                const gbkDecoder = new TextDecoder('gbk');// 使用gbk解码文件内容
                let text;
                if (isUtf8(new Uint8Array(contents))) {
                    text = utf8Decoder.decode(contents);
                } else {
                    text = gbkDecoder.decode(contents);
                }
                textArea.value = text;// 在文本输入框中显示解码后的文本
            };
            reader.readAsArrayBuffer(file); // 以字节数组的形式读取文件内容


        }

        /*
        检查一个Uint8Array是否是UTF-8编码。
            https://tools.ietf.org/html/rfc3629
            UTF8-char = UTF8-1 / UTF8-2 / UTF8-3 / UTF8-4
            UTF8-1    = %x00-7F
            UTF8-2    = %xC2-DF UTF8-tail
            UTF8-3    = %xE0 %xA0-BF UTF8-tail
                        %xE1-EC 2( UTF8-tail )
                        %xED %x80-9F UTF8-tail
                        %xEE-EF 2( UTF8-tail )
            UTF8-4    = %xF0 %x90-BF 2( UTF8-tail )
                        %xF1-F3 3( UTF8-tail )
                        %xF4 %x80-8F 2( UTF8-tail )
            UTF8-tail = %x80-BF
        */
        /**
         * Check if a Uint8Array is UTF-8.
         *
         * Copied from https://github.com/hcodes/isutf8
         *
         * @param {Uint8Array} buf
         */
        //编码格式兼容
        function isUtf8(buf) {
            let i = 0;
            const len = buf.length;
            while (i < len) {
                // UTF8-1 = %x00-7F
                if (buf[i] <= 0x7F) {
                    i++;
                    continue;
                }
                // UTF8-2 = %xC2-DF UTF8-tail
                if (buf[i] >= 0xC2 && buf[i] <= 0xDF) {
                    // if(buf[i + 1] >= 0x80 && buf[i + 1] <= 0xBF) {
                    if (buf[i + 1] >> 6 === 2) {
                        i += 2;
                        continue;
                    } else {
                        return false;
                    }
                }
                // UTF8-3 = %xE0 %xA0-BF UTF8-tail
                // UTF8-3 = %xED %x80-9F UTF8-tail
                if (
                    (
                        (buf[i] === 0xE0 && buf[i + 1] >= 0xA0 && buf[i + 1] <= 0xBF) ||
                        (buf[i] === 0xED && buf[i + 1] >= 0x80 && buf[i + 1] <= 0x9F)
                    ) && buf[i + 2] >> 6 === 2
                ) {
                    i += 3;
                    continue;
                }
                // UTF8-3 = %xE1-EC 2( UTF8-tail )
                // UTF8-3 = %xEE-EF 2( UTF8-tail )
                if (
                    (
                        (buf[i] >= 0xE1 && buf[i] <= 0xEC) ||
                        (buf[i] >= 0xEE && buf[i] <= 0xEF)
                    ) &&
                    buf[i + 1] >> 6 === 2 &&
                    buf[i + 2] >> 6 === 2
                ) {
                    i += 3;
                    continue;
                }
                // UTF8-4 = %xF0 %x90-BF 2( UTF8-tail )
                //          %xF1-F3 3( UTF8-tail )
                //          %xF4 %x80-8F 2( UTF8-tail )
                if (
                    (
                        (buf[i] === 0xF0 && buf[i + 1] >= 0x90 && buf[i + 1] <= 0xBF) ||
                        (buf[i] >= 0xF1 && buf[i] <= 0xF3 && buf[i + 1] >> 6 === 2) ||
                        (buf[i] === 0xF4 && buf[i + 1] >= 0x80 && buf[i + 1] <= 0x8F)
                    ) &&
                    buf[i + 2] >> 6 === 2 &&
                    buf[i + 3] >> 6 === 2
                ) {
                    i += 4;
                    continue;
                }
                return false;
            }
            return true;
        }
    });
</script>
<script src="../js/shit.js"></script>

</html>